<template>
<div style="display: inline-block; direction: ltr;">
    <Input :rtl="rtl" class="input" :placeholder="lang.label_of_uighur_language" v-model="data.ug" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.ug = ''"></Button>
        <p :slot="start_slot">{{ lang.label_of_uighur_language }}</p>
    </Input>

    <Input :rtl="rtl" class="input" :placeholder="lang.label_of_chinese_language" v-model="data.zh" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.zh = ''"></Button>
        <p :slot="start_slot">{{ lang.label_of_chinese_language }}</p>
    </Input>

    <Input :rtl="rtl" class="input" :placeholder="lang.label_of_kazakh_language" v-model="data.kz" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.kz = ''"></Button>
        <p :slot="start_slot">{{ lang.label_of_kazakh_language }}</p>
    </Input>

    <Input :rtl="rtl" class="input" :placeholder="lang.label_of_english_language" v-model="data.en" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.en = ''"></Button>
        <p :slot="start_slot">{{ lang.label_of_english_language }}</p>
    </Input>

    <Input :rtl="rtl" class="input" :placeholder="lang.label_of_russian_language" v-model="data.ru" @input="change">
        <Button icon="ios-close-outline" :slot="end_slot" @click="data.ru = ''"></Button>
        <p :slot="start_slot">{{ lang.label_of_russian_language }}</p>
    </Input>
</div>
</template>

<script>

import {Name} from "../Entities/Name"

const CHANGE = "change"
const DATA = "data"
const VALID = "valid"

//075523580875

export default {
  model: {
    prop: DATA,
    event: CHANGE
  },
  props: {
    rtl: {
      required: false,
      default: false,
      type: Boolean
    },
    data: {
      required: true,
      type: Object,
      validator: Name.isValid
    }
  },
  data() {
    return {

    }
  },
  methods: {
    change() {
      this.$emit(VALID, this.valid)
      this.$emit(CHANGE, this.data)
    }
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    start_slot(){
      return this.rtl ? "append" : "prepend"
    },
    end_slot(){
      return !this.rtl ? "append" : "prepend"
    },
    valid(){
      let valid = true;
      valid &= this.data.ug != ""
      valid &= this.data.zh != ""

      return valid ==1 ? true : false
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  width: 50px;
}

.input {
  margin: {
    top: 5px;
    bottom: 5px;
  }
}
</style>


